<template>
	<view class="content">
		<scroll-view :style="{height: height+'px'}" scroll-y>
			<!-- 聊天消息 -->
			<view class="item" v-for="item in list.array" :class="{'mychat': info.personId==item.fromId}">
				<image src="../../static/user/user.png" class="img"></image>
				<text :class="{'mybc':info.personId!==item.fromId}">{{item.msg}}</text>

			</view>
		</scroll-view>
	</view>

	<view class="footer" ref="footer" id="footer" :style="'bottom:'+keyheight+'px'">
		<view class="content-wrap">
			<input type="text" class="content" v-model="text" maxlength="-1" />
		</view>
		<view class="btn-wrap">
			<button class="btn" @click="send">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from "@dcloudio/uni-app"
	import api from '@/api/api'
	import {
		getCurrentTime
	} from '../../utils/utils.js'
	// 引入socket对象
	const {
		proxy
	} = getCurrentInstance()
	const socket = proxy.$socket



	// 接收消息
	socket.on('getmsg', (res) => {
		console.log(res,'聊天页面接收的消息')
		if(list.array.length>0){
			list.array.push(res.data)
		}
	})


	let text = ref('')
	// 发送消息
	const send = () => {
		let time = getCurrentTime()
		let msgdata = {
			fromId: uni.getStorageSync('info').personId,
			toId: toId,
			toName: toName,
			fromName: uni.getStorageSync('info').nickname,
			msg: text.value,
			time: time
		}
		socket.emit('msg', msgdata)
		list.array.push(msgdata)
		text.value = ''
		uni.showToast({
			title: '发送成功',
			icon: 'none',
			duration: 1000
		})
	}



	let toId = null,
		toName = '',
		list = reactive({
			array: []
		})

	const  info=uni.getStorageSync('info')
	onLoad((options) => {
		console.log(options)
		toName = options.toName
		if (options.toName) {
			uni.setNavigationBarTitle({
				title: options.toName
			})
		}
		if (options.toId) {
			toId = options.toId
		}
		if (options.roomId) {
			api.getNewsInfo({
				roomId: options.roomId
			}).then(res => {
				list.array = res.data
			})
		}else{
			api.getNewsInfo({
				fromId:info.personId,
				toId:options.toId
			}).then(res => {
				list.array = res.data
			})
		}
	})
</script>

<style lang="scss">
	.mychat {
		flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
		display: flex;
	}



	.content {
		margin: 30rpx;

		.item {
			display: flex;
			align-items: center;
			margin: 20rpx 0;

			.mybc {
				background-color: white;
				color: #666666;
			}

			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			text {
				border-radius: 16rpx;
				padding: 10rpx;
				background-color: #0b96ff;
				color: white;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
	}



	.footer {
		width: 100%;
		box-sizing: border-box;
		background-color: #E9EDF4;
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		padding: 14rpx 30rpx;

		.content-wrap {
			flex: 1;

			.content {
				height: 80rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30rpx;
				padding: 10rpx;
				caret-color: #01B4FE;
			}
		}

		.btn-wrap {
			display: flex;
			align-items: center;
			margin-left: 14rpx;

			.btn {
				height: 65rpx;
				font-size: 26rpx;
				
				background-color: #01B4FE;
				color: #FFFFFF;
				border: 0;
				outline: none;
			}
			.btn:active{
				background-color: #aae8f5;
			}
		}
	}
</style>
